<template>
  <div class="container">
    <div class="user">
      <TopCell text="编辑资料" @click="backUser" />
      <div class="userIcon">
        <van-uploader :after-read="upload">
          <div class="a">
            <img src="../assets/img/男头像.png" alt="" v-if="!userImg" />
            <img :src="$axios.defaults.baseURL + userImg" alt="" v-else />
          </div>
        </van-uploader>
      </div>
    </div>

    <PresonalCell me="昵称" :des="nickname" @click.native="show = true" />
    <PresonalCell me="密码" des="******" @click.native="showPwd = true" />
    <PresonalCell
      me="性别"
      :des="gender === 1 ? '男' : '女'"
      @click.native="showSex = true"
    />

    <!-- 弹出层修改昵称 -->
    <van-dialog
      v-model="show"
      title="修改昵称"
      show-cancel-button
      @confirm="setNickName"
    >
      <van-field
        v-model="newValue"
        autofocus
        input-align="center"
        size="24"
        placeholder="请输入新的昵称"
        maxlength="10"
      />
    </van-dialog>
    <!-- 弹出层修改密码 -->
    <van-dialog
      v-model="showPwd"
      title="修改密码"
      show-cancel-button
      @confirm="setPwd"
    >
      <van-field
        v-model="newPassword"
        autofocus
        input-align="center"
        size="24"
        placeholder="请输入新密码"
        type="password"
        maxlength="10"
      />
    </van-dialog>
    <!-- 弹出层修改性别 -->
    <van-action-sheet
      title="修改性别"
      v-model="showSex"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="setSex"
    />
  </div>
</template>

<script>
import { changeUserInfo } from "@/api/userInfo";
import { getUserInfo } from "@/api/userInfo";
import { uploadFile } from "@/api/uploadFile";
import PresonalCell from "../components/PersonalCell";
import TopCell from "../components/TopCell";
export default {
  components: {
    PresonalCell,
    TopCell,
  },
  data() {
    return {
      nickname: "",
      password: "",
      gender: 0,
      userImg: "",
      show: false,
      newValue: "",
      showPwd: false,
      newPassword: "",
      showSex: false,
      actions: [{ name: "女" }, { name: "男" }],
    };
  },
  methods: {
    // 上传图片
    upload(fileObj) {
      let data = new FormData();
      data.append("file", fileObj.file);
      uploadFile(data).then((res) => {
        if (res.data.message === "文件上传成功") {
          // 修改图片
          changeUserInfo({ head_img: res.data.data.url }).then(() => {
            this.userImg = res.data.data.url;
          });
        }
      });
    },
    // showPopup() {
    //   this.show = true;
    // },
    // // 修改昵称
    setNickName() {
      changeUserInfo({ nickname: this.newValue }).then((res) => {
        if (res.data.message === "修改成功") {
          this.$toast.success("修改成功");
          getUserInfo().then((res) => {
            this.nickname = res.data.data.nickname;
          });
        }
      });
    },
    // // 修改密码
    setPwd() {
      changeUserInfo({ password: this.newPassword }).then((res) => {
        if (res.data.message === "修改成功") {
          this.$toast.success("修改成功");
        }
      });
    },
    // 修改性别
    setSex(value, index) {
      changeUserInfo({ gender: index }).then((res) => {
        if (res.data.message === "修改成功") {
          this.$toast.success("修改成功");
          getUserInfo().then((res) => {
            this.gender = res.data.data.gender;
          });
        }
      });
    },
    backUser() {
      this.$router.push("/user");
    },
  },
  created() {
    getUserInfo().then((res) => {
      this.nickname = res.data.data.nickname;
      this.password = res.data.data.password;
      this.gender = res.data.data.gender;
      this.userImg = res.data.data.head_img;
    });
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.container {
  //   width: 100%;
  height: 100vh;
  padding: 0 10/360 * 100vw;
  background-color: #f2f2f2;
  .user {
    padding-bottom: 20/360 * 100vw;
    .edit {
      display: flex;
      justify-content: space-between;
      padding-top: 15/360 * 100vw;
      .iconjiantou2 {
        font-size: 18/360 * 100vw;
      }
      .text {
        font-size: 16/360 * 100vw;
        font-weight: 700;
      }
    }
    .userIcon {
      margin-top: 30/360 * 100vw;
      display: flex;
      justify-content: center;
      height: 100/360 * 100vw;
      width: 100%;
      .a {
        height: 100/360 * 100vw;
        width: 100/360 * 100vw;
        border-radius: 50/360 * 100vw;
        overflow: hidden;
        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .changename {
    margin-top: 50/360 * 100vw;
    margin-left: 30/360 * 100vw;
    margin-right: 30/360 * 100vw;
    width: 200/360 * 100vw;
    height: 40/360 * 100vw;
    border: 1px solid tomato;
    border-radius: 8/360 * 100vw;
    text-align: center;
  }
  .changepassword {
    margin-top: 10/360 * 100vw;
    margin-left: 30/360 * 100vw;
    margin-right: 30/360 * 100vw;
    width: 200/360 * 100vw;
    height: 40/360 * 100vw;
    border: 1px solid tomato;
    border-radius: 8/360 * 100vw;
    text-align: center;
  }
  .btn {
    margin-top: 10/360 * 100vw;
    margin-left: 140/360 * 100vw;
  }
}
</style>